// 路由的使用步骤是5+2
//1、下载          npm i vue-router@3.6.5   【vue2  vueRouter3.x  vuex3.x】   【vue3  vueRouter4.x  vuex4.x】  

import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'
import Home from '@/views/Home.vue'
import Search from '@/views/Search.vue'
import NotFound from '@/views/NotFound.vue'

import LayOut from '@/views/mianjing/LayOut.vue'
import ArticleDetail from '@/views/mianjing/ArticleDetail.vue'
import Article from '@/views/mianjing/Article.vue'
import Collect from '@/views/mianjing/Collect.vue'
import Like from '@/views/mianjing/Like.vue'
import User from '@/views/mianjing/User.vue'

import Vue from 'vue'

//2、引入          import VueRouter from 'vue-router'
import VueRouter from 'vue-router'
//3、安装注册      Vue.use(VueRouter)
Vue.use(VueRouter)
//4、创建实例对象  new VueRouter({})
const router = new VueRouter({
  mode: 'history',
  routes: [
    // 默认路由，重定向到指定页面
    {
      path: '/', component: LayOut, redirect: '/article', children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User },
      ]
    },
    { path: '/detail/:id', component: ArticleDetail },


    // ==学习=================================================
    { path: '/home', component: Home },
    { path: '/search', component: Search },
    //动态参数传参，适合单个参数传递，多个参数用对象,添加？表示是可选
    { name: 'search', path: '/search/:words?', component: Search },
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
    //当路径找不到时，配hi到最后，提示用户
    { path: '*', component: NotFound }
  ],
  //自定义高亮类名
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',


})

export default router